<script setup lang='ts'>
import { onClickOutside } from '@vueuse/core';
import { ref } from 'vue';

const {modelValue}=defineProps<{
  modelValue:boolean
}>()
const emit=defineEmits<
{
  (event: 'update:modelValue', val: boolean): void
}>()
const close=()=>{
  emit('update:modelValue',false)
}
const target=ref(null)
onClickOutside(target,()=>{
  close()
})
const cancel=()=>{
  close()
}
const confirm=()=>{
  close()
  alert('确认删除')
}
</script>

<template>
    <div class="box" ref="target">
      <div class="title">
        <span>温馨提示</span>
        <span class="close iconfont icon-close-new" @click="close"></span>
      </div>
      <div class="content">
        <slot name="content"/>
      </div>
      <div class="btn">
        <button class="btn1" @click="cancel">取消</button>
        <button class="btn2" @click="confirm">确认</button>
      </div>
    </div>
</template>

<style lang='less' scoped>
.box{
  .close{
    margin-left: 200px;
    cursor: pointer;
  }
  margin: 0 auto;
  width: 300px;
  height: 180px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  .btn{
    button{
       border: 0;
       border-radius: 5px;
       color: #fff;
       cursor: pointer;
    }
    .btn1{
      margin-left: 100px;
      padding: 5px 20px;
      background-color: gray;
    }
    .btn2{
      margin-left: 30px;
      padding: 5px 20px;
      background-color: rgb(52, 181, 52);
    }
  }
}
</style>